<!-- Widget --> <div class="widget widget-inverse"> <!-- Widget heading --> <div class="widget-head"> <h4 class="heading">Select controls</h4> </div> <!-- // Widget heading END --> <div class="widget-body"> <div class="row"> <div class="col-md-3"> <h5>Default</h5> <div class="row"> <div class="innerLR innerB"> <select class="col-md-12 form-control"> <optgroup label="Picnic"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </optgroup> <optgroup label="Camping"> <option>Tent</option> <option>Flashlight</option> <option>Toilet Paper</option> </optgroup> </select> </div> </div> <h5>Extended</h5> <div class="row"> <select class="selectpicker col-md-12"> <optgroup label="Picnic"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </optgroup> <optgroup label="Camping"> <option>Tent</option> <option>Flashlight</option> <option>Toilet Paper</option> </optgroup> </select> </div> </div> <div class="col-md-5"> <h5>Styles</h5> <div class="row"> <select class="selectpicker col-md-6" data-style="btn-primary"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> <select class="selectpicker col-md-6" data-style="btn-default"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <div class="row"> <select class="selectpicker col-md-6" data-style="btn-info"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> <select class="selectpicker col-md-6" data-style="btn-success"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <div class="row"> <select class="selectpicker col-md-6" data-style="btn-warning"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> <select class="selectpicker col-md-6" data-style="btn-inverse"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> </div> <div class="col-md-4"> <h5>Grid</h5> <div class="row"> <select class="selectpicker col-md-3"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> <select class="selectpicker col-md-9"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <div class="row"> <select class="selectpicker col-md-4"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> <select class="selectpicker col-md-8"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <div class="row"> <select class="selectpicker col-md-6"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> <select class="selectpicker col-md-6"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> </div> </div> </div> </div> <!-- // Widget END -->
@import "http://localhost/shared/components/modules/admin/forms/elements/bootstrap-select/assets/lib/css/bootstrap-select.css"; @import "http://localhost/shared/components/modules/admin/forms/elements/bootstrap-select/assets/custom/less/bootstrap-select.less"; @import "assets/components/core/less/widgets.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
BODY You should include the following scripts at the end of the HTML document, right before the closing </body>
tag.
<script src="assets/components/modules/admin/forms/elements/bootstrap-select/assets/lib/js/bootstrap-select.js?v=v1.2.3"></script> <script src="assets/components/modules/admin/forms/elements/bootstrap-select/assets/custom/js/bootstrap-select.init.js?v=v1.2.3"></script>